<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      title="目录"
      :data="treeFilterData"
      :default-value="initParam.departmentId"
      :show-all-flag="false"
      @change="changeTreeFilter"
    />

    <div class="content-area">
      <WangEditor v-model:value="content" :hide-tool-bar="true" :disabled="true" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="treeProTable">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import WangEditor from "@/components/WangEditor/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { getKnowledgeTree, getKnowledgeContent } from "@/api/modules/knowledge";

const content = ref("11");
onMounted(() => {
  getTreeFilter();
});

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ departmentId: "" });

// 获取 treeFilter 数据
// 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据
const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getKnowledgeTree({});
  treeFilterData.value = data;
};

// 树形筛选切换
const changeTreeFilter = async (val: string) => {
  ElMessage.success("请注意查看请求参数变化 🤔" + val);
  const { data } = await getKnowledgeContent({});
  content.value = data;
};
</script>
<style scoped>
.content-area {
  width: 100%;
  background: white;
  border: 1px solid white;
  border-radius: 6px;
}
</style>
